<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <div class="basic-top-wrap">
        <el-row :gutter="10">
          <el-col :span="24">企业名称：{{ details.companyName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">法人代表：{{ details.legalPerson }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">企业类型：{{ details.customerTypeString }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24"
            >成立日期：{{
              details.establishedTime && details.establishedTime.split(" ")[0]
            }}</el-col
          >
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24"
            >统一社会代码：{{ details.unifiedSocialCreditCode }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24">详细地址：{{ details.address }}</el-col>
        </el-row>
      </div>
      <div>
        <h2 class="information-title">结算户信息</h2>
        <el-row :gutter="10">
          <el-col :span="24">开户银行：{{ details.bank }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">开户人：{{ details.openBankName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24"
            >开户支行：{{ details.accountOpeningBranch }}</el-col
          >
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">银行账户：{{ details.bankCardNumber }}</el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12" class="border-left">
      <div class="basic-top-wrap">
        <p style="margin-top:0;">企业档案：</p>
        <el-upload
          class="upload-demo"
          drag
          :http-request="uploadFile"
          :show-file-list="false"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            支持扩展名：txt doc docx pdf excel csv jpg png...
          </div>
        </el-upload>
      </div>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page="page"
        ref="crud"
        @on-load="onLoad"
      >
        <template slot-scope="{ row }" slot="menu">
          <el-button type="text" size="small" @click="deletelRow(row)"
            >删除</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <a :href="row.fullUrl">
            <el-button type="text" size="small">下载</el-button>
          </a>
        </template>
      </avue-crud>
    </el-col>
  </el-row>
</template>

<script>
import {
  getArchives,
  uploadArchives,
  deleteArchives,
} from "@/api/meter/customer";
export default {
  props: {
    details: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      page: {
        pageSize: 3,
        currentPage: 1,
        total: 0,
        pageSizes: [3],
      },
      data: [],
      option: {
        searchShow: true,
        addBtn: false,
        delBtn: false,
        searchMenuSpan: 6,
        border: true,
        editBtn: false,
        viewBtn: false,
        refreshBtn: false,
        columnBtn: false,
        header: false,
        dialogClickModal: false,
        menuWidth: 100,
        column: [
          {
            label: "档案名称",
            prop: "originName",
          },
          // {
          //   label: "类型",
          //   prop: "category",
          // },
          {
            label: "时间",
            prop: "createTime",
          },
          {
            label: "上传人",
            prop: "userName",
          },
        ],
      },
    };
  },
  watch: {
    details(value) {
      this.onLoad();
    },
  },
  methods: {
    uploadFile(file) {
      if (!this.details.id) {
        this.$message({
          type: "warning",
          message: "请先选择客户!",
        });
      }
      if (
        !/\.(txt||doc||docx||pdf||excel||csv||jpg||png||PNG||JPG||JPEG||jpeg||TXT||DOC||DOCX||PDF||CSV||ECCEL)$/.test(
          file.file.name
        )
      ) {
        this.$message({
          type: "warning",
          message: "只支持 txt word pdf excel csv jpg png等格式的文件！",
        });
        return;
      }
      const form = new FormData();
      form.append("file", file.file);
      this.file = form;
      uploadArchives(this.file, this.details.id).then((res) => {
        this.onLoad();
        this.$message({
          message: "上传成功",
          type: "success",
        });
      });
    },
    deletelRow(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deleteArchives(row.id);
        })
        .then(() => {
          this.onLoad();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    onLoad() {
      const { page } = this;
      if (this.details.id) {
        getArchives({
          customerId: this.details.id,
          current: page.currentPage,
          size: page.pageSize,
        }).then((res) => {
          const data = res.data.data.records;
          this.data = data;
          this.page.total = res.data.data.total;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-top-wrap {
  height: 170px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}
.upload-demo {
  margin: 0 auto;
  text-align: center;
}
.border-left {
  border-left: 1px solid #e1e1e1;
}
.information-title {
  font-size: 16px;
}
</style>
<style lang="scss">
.upload-demo .el-upload-dragger {
  height: 100px;
  .el-icon-upload {
    margin-top: 1px;
  }
}
</style>
